<template>
  <div class="table-container">
    <el-table :data="paramtableData" border class="ptable">
      <el-table-column
        v-for="(item, key) in tableheader"
        :key="key"
        :prop="item.prop"
        :label="item.label"
        align="center"
      >
        <template slot-scope="scope">
          <el-checkbox
            v-if="scope.$index === 0"
            v-model="checksearch"
            :label="key"
            >{{ cb }}
          </el-checkbox>
          <span style="margin-left: 10px">{{ scope.row[item.prop] }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "paramTable",
  props: {
    paramtableData: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {
      cb: " ",
      tableheader: [
        { label: "日期及周次", prop: "rqjxq" },
        { label: "当前时间", prop: "sj" },
        { label: "最大需量周期", prop: "zdxlzq" },
        { label: "滑差时间", prop: "hcsj" },
        // { label: '校表脉冲宽度', prop: 'xbmckd' },
        { label: "通讯地址", prop: "txdz" },
        { label: "表号", prop: "bh" },
        { label: "电表有功常数", prop: "dbygcs" },
        { label: "电表无功常数", prop: "dbwgcs" },
        { label: "电表运行状态字1", prop: "dbyxztz1" },
        { label: "电表运行状态字2", prop: "dbyxztz2" },
        { label: "电表运行状态字3", prop: "dbyxztz3" },
        { label: "电表运行状态字4", prop: "dbyxztz4" },
        { label: "电表运行状态字5", prop: "dbyxztz5" },
        { label: "电表运行状态字6", prop: "dbyxztz6" },
        { label: "电表运行状态字7", prop: "dbyxztz7" },
        { label: "有功组合方式特征字", prop: "ygzhfstzz" },
        { label: "无功组合方式1特征字", prop: "wgzhfs1tzz" },
        { label: "无功组合方式2特征字", prop: "wgzhfs2tzz" },
        { label: "调制型红外光口通讯速率特征字", prop: "tzxhwgktxsltzz" },
        { label: "接触式红外光口通讯速率特征字", prop: "jcshwgktxsltzz" },
        { label: "通信口1通信速率特征字", prop: "txk1txsltzz" },
        { label: "通信口2通信速率特征字", prop: "txk2txsltzz" },
        { label: "通信口3通信速率特征字", prop: "txk3txsltzz" },
        { label: "第1类符合记录间隔时间", prop: "d1lfhjljgsj" },
        { label: "第2类符合记录间隔时间", prop: "d2lfhjljgsj" },
        { label: "第3类符合记录间隔时间", prop: "d3lfhjljgsj" },
        { label: "第4类符合记录间隔时间", prop: "d4lfhjljgsj" },
        { label: "第5类符合记录间隔时间", prop: "d5lfhjljgsj" },
        { label: "第6类符合记录间隔时间", prop: "d6lfhjljgsj" },
        { label: "每月第1结算日", prop: "myd1jsr" },
        { label: "每月第2结算日", prop: "myd2jsr" },
        { label: "每月第3结算日", prop: "myd3jsr" },
        { label: "年时区数p≤14", prop: "nsqs" },
        { label: "日时时段数p≤8", prop: "rsdbs" },
        { label: "日时段数(每日切换数)m≤14", prop: "rsds" },
        { label: "费率数k≤63", prop: "fls" },
        // { label: '公共假日数n≤254', prop: 'ggjss' },
        { label: "两套时区表切换时间", prop: "ltsqbqhss" },
        { label: "两套日时段表切换时间", prop: "ltrsdbqhss" },
        { label: "第一套时区表数据", prop: "d1tsqbsj" },
        { label: "第一套第1日时段表数据", prop: "d1td1rsdbsj" },
        { label: "第一套第2日时段表数据", prop: "d1td2rsdbsj" },
        { label: "第一套第3日时段表数据", prop: "d1td3rsdbsj" },
        { label: "第一套第4日时段表数据", prop: "d1td4rsdbsj" },
        { label: "第一套第5日时段表数据", prop: "d1td5rsdbsj" },
        { label: "第一套第6日时段表数据", prop: "d1td6rsdbsj" },
        { label: "第一套第7日时段表数据", prop: "d1td7rsdbsj" },
        { label: "第二套时区表数据", prop: "d2tsqbsj" },
        { label: "第二套第1日时段表数据", prop: "d2td1rsdbsj" },
        { label: "第二套第2日时段表数据", prop: "d2td2rsdbsj" },
        { label: "第二套第3日时段表数据", prop: "d2td3rsdbsj" },
        { label: "第二套第4日时段表数据", prop: "d2td4rsdbsj" },
        { label: "第二套第5日时段表数据", prop: "d2td5rsdbsj" },
        { label: "第二套第6日时段表数据", prop: "d2td6rsdbsj" },
        { label: "第二套第7日时段表数据", prop: "d2td7rsdbsj" },
      ],
      checksearch: [],
    };
  },
};
</script>

<style lang="scss">
.ptable {
  display: flex !important;
  flex-direction: row !important;
  .el-table__header-wrapper {
    display: inline-block;
    width: 12.5rem /* 350/16 */;
    th {
      width: 12.5rem /* 350/16 */;
    }
  }
  .el-table__body-wrapper {
    display: inline-block;
    width: calc(100% - 12.5rem);
    .el-table__body {
      width: 100% !important;
      tbody {
        display: block;
        width: 100%;

        tr {
          width: 80%;
          td {
            width: 100%;
          }
        }
        tr:nth-of-type(1) {
          width: 20%;
        }
      }
    }
    .el-table__empty-block {
      display: flex !important;
      flex-direction: column !important;
      width: 100% !important;
    }
  }
  table {
    display: block;
    position: relative;
    width: 100%;
  }
  thead {
    float: left;
  }

  tbody tr {
    display: inline-block;
  }

  th,
  td {
    display: block;
    height: 45px;
  }
}
</style>
